<template>
  <div class="homeBox">
    <h2 class="workTitle marginBtm">待办任务</h2>
    <a-table
      size="middle"
      :columns="workColumns"
      :data-source="workList"
      :rowkey="(record) => record.endDate"
      :pagination="{
        hideOnSinglePage: true,
        pageSize: 10,
        change: (page) => getWorkList({ pageNo: page }),
        ...workPagination,
      }"
    >
      <span slot="taskNum" slot-scope="text, record">
        <a @click="handleSearch(record,'taskNum')">{{ text }}</a>
      </span>
      <span slot="overdueNum" slot-scope="text, record">
        <a @click="handleSearch(record,'overdueNum')">{{ text }}</a>
      </span>
      <span slot="sevenDayDueNum" slot-scope="text, record">
        <a @click="handleSearch(record,'sevenDayDueNum')">{{ text }}</a>
      </span>
      <span slot="fiveDayDueNum" slot-scope="text, record">
        <a @click="handleSearch(record,'fiveDayDueNum')">{{ text }}</a>
      </span>
      <span slot="threeDayDueNum" slot-scope="text, record">
        <a @click="handleSearch(record,'threeDayDueNum')">{{ text }}</a>
      </span>
    </a-table>
  </div>
</template>

<script>
import moment from 'dayjs'
import { queryAgencyTask } from '@/api/api'

const workColumns = [
  {
    title: '数据日期',
    dataIndex: 'sjrq',
    align: 'center',
    ellipsis: true,
  },
  {
    title: '任务总数',
    dataIndex: 'taskNum',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'taskNum' },
  },
  {
    title: '超期任务',
    dataIndex: 'overdueNum',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'overdueNum' },
  },
  {
    title: '5-7天到期',
    dataIndex: 'sevenDayDueNum',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'sevenDayDueNum' },
  },
  {
    title: '3-5天到期',
    dataIndex: 'fiveDayDueNum',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'fiveDayDueNum' },
  },
  {
    title: '1-3天到期',
    dataIndex: 'threeDayDueNum',
    align: 'center',
    ellipsis: true,
    scopedSlots: { customRender: 'threeDayDueNum' },
  },
]
export default {
  name: 'NeedWork',
  data() {
    return {
      workColumns,
      workList: [],
      workPagination: {},
    }
  },
  created() {
    this.getWorkList({ pageNo: 1 })
  },
  methods: {
    // 待办
    getWorkList(page) {
      queryAgencyTask({ pageSize: 10, ...page }).then((res) => {
        if (res.code === 200) {
          this.workList = res.result.records || []
          this.workPagination = {
            current: res.result.pages,
            total: res.result.total,
          }
        } else {
          this.workList = []
          this.workPagination = {
            current: 1,
            total: 0,
          }
          this.$message.warning(res.message)
        }
      })
    },
    handleSearch(record,key) {
      if(!record[key]){
        return
      }
      let item ={sjrq: record.sjrq}
      switch (key) {
        case 'taskNum':
          break;
      case 'overdueNum':
          item.dueDate=moment(new Date().getTime()).format('YYYY-MM-DD')
          break;
      case 'sevenDayDueNum':
      case 'fiveDayDueNum':
       case 'threeDayDueNum':
          item.dueDate=key
          break;
        default:
          break;
      }
      this.$emit('search', item,key)
    },
  },
}
</script>

<style scoped lang="less">
@import url('./style.less');
.homeBox {
  background: #fff;
  padding: 20px;
  margin-bottom: 20px;
  .hover();
}
.workTitle {
  font-size: 16px;
  padding-bottom: 15px;
  border-bottom: 1px solid #e8e8e8;
  color: #000;
  font-weight: 700;
}
.marginBtm {
  margin-bottom: 25px;
}
</style>